
<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">    

         <el-form-item label="选择角色">
            <el-select v-model="queryParams.roleId" @change="onSelectRole">
               <el-option v-for="item in roleArr" :label="item.roleName" :value="item.roleId"
                  :Key="item.roleId"></el-option>
            </el-select>
         </el-form-item>

         <el-form-item label="岗位名称" style="width:300px">
            <el-input  v-model="queryParams.postName" clearable @change="onInputChange" placeholder="请输入岗位名称"></el-input>
         </el-form-item>

         <el-form-item label="状态">
            <el-select v-model="queryParams.status" @change="onSelectStatus" placeholder="请选择角色状态" clearable>
               <el-option v-for="(item, index) in sys_normal_disable" :label="item.label" :value="item.value"
                  :key="item.value"></el-option>
            </el-select>
         </el-form-item>

         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>

      </el-form>

      <el-row :gutter="10" class="mb8">


         <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="openSelectUser"
               v-hasPermi="['system:role:add']">选择岗位</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="danger" plain icon="CircleClose" :disabled="multiple" @click="handleCancelPostBindRole()"
               v-hasPermi="['system:role:remove']">批量取消授权</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="warning" plain icon="Back" @click="handleClose">返回上一级</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table border v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="岗位标识" width="200" align="center" prop="postCode"></el-table-column>
         <el-table-column label="岗位名称" width="200" align="center" prop="postName"></el-table-column>
         <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column label="显示顺序" width="150" align="center" prop="postSort">1</el-table-column>
         <el-table-column label="状态" width="150" align="center" prop="status">
            <template #default="scope">
               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
         </el-table-column>
         <el-table-column label="创建时间" width="300" align="center" prop="createTime">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button type="primary" link icon="CircleClose" @click="handleCancelPostBindRole(scope.row)" :disabled="postIdArr.length >1"
                  v-hasPermi="['system:role:remove']">取消授权</el-button>
            </template>
         </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
         @pagination="getList" />
      <select-user ref="selectRef" :roleId="queryParams.roleId" @ok="handleQuery" />
   </div>
</template>

<script setup name="AuthUser">
import selectUser from "./selectUser";
import { allocatedUserList, authUserCancel, authUserCancelAll, listRole, postListByRoleId, cancelPostBindrole } from "@/api/system/role";

const route = useRoute();
console.log(route.params, "<<<=== 拿到当前路由 route.params 拿到的字符串 应该是number");
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const userList = ref([]);//表格数据
const loading = ref(true);
const showSearch = ref(true);
const multiple = ref(true);//多选开关
const total = ref(0);
const postIdArr = ref([]);//多选时岗位id的数组
const roleArr = ref([])
const roleId = Number(route.params.roleId)
console.log(typeof roleId === "number", "<<<=== 检查是否为number");

console.log(proxy, "<<<=== proxy 当前实例对象");

// 用于查询的响应式数据
const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
   roleId: roleId,
   postName: null,//岗位名称
   status: null,//角色状态

   //   roleId: route.params.roleId,//从当前路由对象中拿到通过路由参数传递过来的roleId角色id
});

// const queryParams = reactive({
//   pageNum: 1,
//   pageSize: 10,
//   roleId: route.params.roleId,
//   userName: undefined,
//   phonenumber: undefined,
// });


/**取消岗位绑定角色 */
function handleCancelPostBindRole(row) {
   console.log(row, "<<<=== row 点击取消授权按钮 当前行");
   // 不是点当前行
   if (!multiple.value) {
      proxy.$modal.confirm("您确定要取消授权吗？").then(()=>{
         return cancelPostBindrole({ postIdList:postIdArr.value, roleId: queryParams.roleId })
      }).then((res) => {
         console.log(res, "<<<=== res 取消岗位绑定角色");
         proxy.$modal.msgSuccess(res.msg)
         getList()
      }).catch((error) => {
         console.log(error, "<<<=== error");
      })
      return
   }
   const postIdList = []
   postIdList.push(row.postId)
   console.log(postIdList, "<<<=== postIdList数组");
   cancelPostBindrole({ postIdList, roleId: queryParams.roleId }).then((res) => {
      console.log(res, "<<<=== res 取消岗位绑定角色");
      proxy.$modal.msgSuccess(res.msg)
      getList()
   }).catch((error) => {
      console.log(error, "<<<=== error");
   })

}

/**下拉选择角色时触发 */
function onSelectRole(val) {
   console.log(val, "<<<=== val 下拉选择角色");
}

/**输入框的内容改变时触发 */
function onInputChange(val) {
   console.log(val, "<<<=== val 输入框内容改变");
}

/**下拉列表选择状态时触发 */
function onSelectStatus(val) {
   console.log(val, "<<<=== val 选择状态");
}

/**拿到角色列表数据 */
function getRoleList() {
   listRole().then((res) => {
      console.log(res, "<<<=== res 拿到角色列表");
      roleArr.value = res.rows
      console.log(roleArr.value, "<<<=== roleArr");
   }).catch((error) => {
      console.log(error, "<<<===error");
   })
}

/** 查询角色对应的岗位列表 */
function getList() {
   loading.value = true;
   postListByRoleId(queryParams).then((res) => {
      console.log(res, "<<<=== res 根据角色id拿到的岗位数据");
      userList.value = res.rows
      console.log(userList.value, "<<<=== userList.value");
      total.value = res.total
      loading.value = false
   }).catch((error) => {
      console.log(error, "<<<=== error");
   })


   //   allocatedUserList(queryParams).then(res => {
   //     userList.value = res.rows;
   //     console.log(userList.value,"<<<=== userList.value");
   //     total.value = res.total;
   //     loading.value = false;
   //   });
}
// 返回按钮
function handleClose() {
   const obj = { path: "/system/role" };
   proxy.$tab.closeOpenPage(obj);
}
/** 搜索按钮操作 */
function handleQuery() {
   queryParams.pageNum = 1;
   getList();
}
/** 重置按钮操作 */
function resetQuery() {
   queryParams.postName=null
   queryParams.status=null
   handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
   console.log(selection, "<<<=== 多选改变触发-selection");
   postIdArr.value = selection.map(item => item.postId);
   console.log(postIdArr, "<<<=== postIdArr 岗位id数组");
   multiple.value = !selection.length;
}
/** 打开选择岗位弹框 */
function openSelectUser() {
   proxy.$refs["selectRef"].show();
}
/** 取消授权按钮操作 */
function cancelAuthUser(row) {
   proxy.$modal.confirm('确认要取消该用户"' + row.postName + '"角色吗？').then(function () {
      return authUserCancel({ userId: row.userId, roleId: queryParams.roleId });
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("取消授权成功");
   }).catch(() => { });
}
/** 批量取消授权按钮操作 */
function cancelAuthUserAll(row) {
   const roleId = queryParams.roleId;
   const uIds = postIdArr.value.join(",");
   proxy.$modal.confirm("是否取消选中用户授权数据项?").then(function () {
      return authUserCancelAll({ roleId: roleId, postIdArr: uIds });
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("取消授权成功");
   }).catch(() => { });
}

getList();
getRoleList()
</script>
